<template>
  <div id="printTest">
    <el-row>
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-printer" size="mini" v-print="'#printTest'">打印</el-button>
          <el-button type="info" icon="el-icon-back" size="mini" @click="shang">上一月</el-button>
          <el-button type="info" size="mini" @click="xia">下一月<i style="margin-left:5px;" class="el-icon-right"></i>
          </el-button>
          <span style="padding-left:10px;">{{DateCount}}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-input size="mini" v-model="Description" placeholder="输入关键字搜索">
            <el-button slot="append" @click="FNameSelectAttendanceList" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <!-- 数据展示 -->
    <div style="padding-top:10px"></div>
    <el-table :data="tableDate" border>
      <el-table-column prop="部门" label="部门"></el-table-column>
      <el-table-column prop="人员" label="成员"></el-table-column>
      <el-table-column prop="上班" label="上班"></el-table-column>
      <el-table-column prop="下班" label="下班"></el-table-column>
      <el-table-column prop="外出" label="外出"></el-table-column>
      <el-table-column prop="请假" label="请假"></el-table-column>
      <el-table-column prop="加班" label="加班"></el-table-column>
      <el-table-column prop="正常" label="正常"></el-table-column>
      <el-table-column prop="迟到" label="迟到"></el-table-column>
      <el-table-column prop="早退" label="早退"></el-table-column>
      <el-table-column prop="旷工" label="旷工"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.foot_page {
  padding: 5px;
  text-align: center;
}
</style>
<script>
export default {
  data () {
    return {
      tableDate: [],
      Y: null,//年
      M: null,//月
      Description: ''
    }
  },
  methods: {
    GetDt () {
      this.$axios({
        url: '/HrApi/Attendance/GetmonthlyList',
        method: 'Post',
        data: this.$Qs.stringify({
          StartTime: `${this.Y}/${this.M}/1`,
          Term: this.Description

        })
      }).then(res => {
        this.tableDate = res.data.data;

      })
    },
    FNameSelectAttendanceList () {
      this.$axios({
        url: '/HrApi/Attendance/GetmonthlyList',
        method: 'Post',
        data: this.$Qs.stringify({
          StartTime: `${this.Y}/${this.M}/1`,
          Term: this.Description
        })
      }).then(res => {
        this.tableDate = res.data.data;

      })
    },
    shang () {
      this.M--
      if (this.M < 1) {
        this.Y -= 1
        this.M = 12
      }
      this.GetDt()
    },
    xia () {
      let date = new Date();
      if (this.Y === date.getFullYear() && this.M === (date.getMonth() + 1)) {
        this.$message.info("工资截至为当月！")
        return
      }
      this.M++
      if (this.M > 12) {
        this.Y += 1
        this.M = 1
      }
      this.GetDt()
    }
  }, mounted () {
    let date = new Date();
    this.Y = date.getFullYear()
    this.M = date.getMonth() + 1
    this.GetDt();
  },
  computed: {
    DateCount: function () {
      return `${this.Y}年 ${this.M}月`
    }
  }
};
</script>